<template>
	<div class="">
		<el-card>
			<div slot="header" class="clearfix mt20">
				<div class="container">
					<el-form :inline="true" size="small" label-width="120px">
						<el-form-item label="代理账号">
							<el-input clearable v-model="params.username" placeholder="请填写代理账号" />
						</el-form-item>
						<el-form-item label="代理姓名">
							<el-input clearable v-model="params.name" placeholder="请填写代理姓名" />
						</el-form-item>
						<el-form-item label="联系电话">
							<el-input clearable v-model="params.mobile" placeholder="请填写联系电话" />
						</el-form-item>

						<el-form-item label=" ">
							<el-button type="primary" size="small" class="searchBtn" @click="handleSearch"
								icon='el-icon-search'>查 询</el-button>
							<el-button type="primary" @click="add" size="small" class="ml10" plain><i
									class="el-icon-plus" /> 添加代理</el-button>
						</el-form-item>
					</el-form>

				</div>

			</div>
			<div style="padding:5px 10px 10px 100px; font-size: 15px; border-bottom: 1px solid #ccc;">
				<span style="margin-right: 20px;">差价佣金</span>
				<span style="margin-right: 20px;">{{fee_diff}}</span>
				<el-link :underline="false" type="primary" title='设置' @click="open_fee" style="margin-right: 20px;">设置</el-link>
				<el-button type="primary" size="medium" plain @click="copy()">邀请连接</el-button>
				<el-button type="success" size="medium" style="margin-left: 30px;" plain  @click="qrcode()">邀请海报</el-button>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :empty-text='emptytxt'>
				<el-table-column prop="agent.username" label="代理账号" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="agent.name" label="代理姓名" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="agent.mobile" label="联系电话" align="center" />
				<el-table-column prop="orderSuccMonth" label="近30天成功订单" align="center" />
				<el-table-column prop="logintime" label="最近登录时间" align="center" />
				<el-table-column prop="createtime" label="创建时间" align="center" />
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" title='编辑' @click="edit(scope.row)" v-if="scope.row.level==1">编辑</el-link>
						<el-link class="ml10" :underline="false" type="warning" title='下级代理号卡商品'
							@click="xia(scope.row)" v-if="scope.row.level==1">号卡</el-link>
						<el-link class="ml10" :underline="false" type="danger" title='重置号卡佣金'
							@click="reset(scope.row)" v-if="scope.row.level==1">重置</el-link>
						<!-- <el-link class="ml10" :underline="false" type="info" title='下级代理话费商品'
							@click="hua(scope.row)">话费</el-link> -->
					</template>
				</el-table-column >
			</el-table>
			<div class="pagination">
				<el-pagination :current-page="params.page" :page-sizes="[10, 20, 50, 100]" :page-size="params.pagesize"
					layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
			</div>
		</el-card>
		<el-dialog :title="sub.id==0?'添加下级代理':'编辑下级代理'" :visible.sync="addshow" :close-on-click-modal="false" left
			width="40%">
			<el-form ref="ruleForm" size="small" :model="sub" :rules="rules" label-width="120px">
				<el-form-item label="代理账号" prop="username">
					<el-input :disabled="sub.id==0?false:true" v-model="sub.username" placeholder="请填写代理账号" clearable />
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input type="password" v-model="sub.password" :placeholder="sub.id==''?'为空则默认123456':'为空则不修改'"
						clearable />
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="代理姓名" prop="name">
							<el-input v-model="sub.name" placeholder="请填写代理姓名" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话">
							<el-input v-model="sub.mobile" placeholder="请填写联系电话" clearable />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div style="margin-top: 30px;text-align: center;">
				<el-button type="primary" size="small" @click="subForm">{{sub.id==0?'确定添加':'确定修改'}}</el-button>
			</div>
		</el-dialog>

		<el-dialog title="代理号卡商品" :visible.sync="xiashow" :close-on-click-modal="false" left width="60%">
			<el-table v-loading="loadingxj" :data="listxj" style="width: 100%" :empty-text='emptytxtxj'>
				<el-table-column prop="goods_id" label="商品ID" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="name" label="商品名称" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="image" label="商品图片" align="center">
					<template slot-scope="scope">
						<el-image style="width:40px;height:40px" :src="scope.row.image"
							:preview-src-list="[scope.row.image]">
							<div slot="error" class="image-slot"></div>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="fee" label="佣金" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="memo" label="介绍" align="center" :show-overflow-tooltip="true" />
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status === 1" type="success" size="mini" disable-transitions>上线</el-tag>
						<el-tag v-if="scope.row.status === -1" type="info" size="mini" disable-transitions>下线</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-link class="ml10" :underline="false" type="primary" title='设置'
							@click="resetone(scope.row)">设置</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog title="设置代理号卡商品" :visible.sync="gsshow" :close-on-click-modal="false" left width="40%">
			<el-form size="small" :model="gsub" label-width="120px">
				<el-form-item label="佣金">
					<el-input type="number" v-model="gsub.fee" placeholder="" clearable>
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="gsub.status">
						<el-radio :label="item.val" v-for="(item,index) in statuslist">{{item.txt}}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div style="margin-top: 30px;text-align: center;">
				<el-button type="primary" size="small" @click="subGs">确定设置</el-button>
			</div>
		</el-dialog>

		<el-dialog title="代理话费商品" :visible.sync="huashow" :close-on-click-modal="false" left width="60%">
			<el-table v-loading="loadinghua" :data="listhua" style="width: 100%" :empty-text='emptytxthua'>
				<el-table-column prop="goods_id" label="ID" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="name" label="名称" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="image" label="图片" align="center">
					<template slot-scope="scope">
						<el-image style="width:40px;height:40px" :src="scope.row.image"
							:preview-src-list="[scope.row.image]">
							<div slot="error" class="image-slot"></div>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column prop="money" label="支付金额" align="center" :show-overflow-tooltip="true" />
				<el-table-column prop="fee" label="佣金" align="center" :show-overflow-tooltip="true" />

				<el-table-column prop="memo" label="介绍" align="center" :show-overflow-tooltip="true" />
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-link class="ml10" :underline="false" type="primary" title='设置'
							@click="resetcharge(scope.row)">设置</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
    <el-dialog title="邀请海报"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    left  width="60%">
        <div style="color:#686868;margin-bottom: 10px;">
          {{copyurl}}
        </div>
        <div style="text-align: center;">
          <!-- <el-image
              style="width: 200px; height: 200px"
              :src="qrcodeurl">
          </el-image> -->
          <el-image
              :src="qrcodeurl">
          </el-image>
          <div style="color:#686868">
            {{qrtitle}}
          </div>
        </div>
    </el-dialog>


	</div>
</template>

<script>
	import {
		agent_aglist,
		agent_agadd,
		agent_agedit,
		agent_resetFee,
		fee_diff,
		agent_resetDiffFee,
		agent_xiaList,
		agent_intive,
		agent_xiaEdit
	} from '@/api/agent'
	import {
		charge_xiaList,
		charge_xiaEdit
	} from '@/api/charge'

	export default {
		data() {
			return {
				dialogVisible:false,
				fee_diff: '',
				copyurl: '',
				qrcodeurl: '',
				qrtitle: '',
				aid: '',
				total: 0,
				loading: true,
				
				emptytxt: '',
				list: [],
				params: {
					username: '',
					name: '',
					mobile: '',
					page: 1,
					pagesize: 10,
				},
				addshow: false,
				sub: {
					id: 0,
					username: '',
					password: '',
					name: '',
					mobile: '',
					fee: '',
				},
				fee0: {
					fee_diff: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请填写代理账号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 20,
							message: '长度在 3 到 30 个字符',
							trigger: 'blur'
						}
					],
					name: [{
						required: true,
						message: '代理姓名不能为空',
						trigger: 'blur'
					}, ],
				},
				xiashow: false,
				loadingxj: true,
				emptytxtxj: '',
				listxj: [],
				gsshow: false, //代理商品修改
				gsub: {
					id: '',
					fee: '',
					status: '',
					agent_id: '',
				},
				statuslist: [{
					val: '1',
					txt: '上线'
				}, {
					val: '-1',
					txt: '下线'
				}],
				huashow: false, //下级话费商品列表
				loadinghua: true,
				emptytxthua: '',
				listhua: [],

			}
		},
		created() {
			this.getList()
		},
		methods: {
			copy(){
				let url =  window.location.origin + '/hk/pages/login/register?type=1&code=' + this.aid;
			    //新建一个文本框
				let oInput = document.createElement('input');
				//赋值给文本框
				oInput.value = url;
				document.body.appendChild(oInput);
				// 选择对象;
				oInput.select();
				// 执行浏览器复制命令
				document.execCommand("Copy");
				//复制完成删除掉输入框
				oInput.remove()
				this.$notify({
					title:'邀请链接已复制',
					message:url,
					type: 'success',
					duration: 2000
				})
			},
			qrcode(){
				agent_intive([]).then(res => {
				this.dialogVisible=true
				this.qrcodeurl=res.data.hb
				this.qrtitle=name?name:''
				this.copyurl=url
				})
			},
			open_fee() {
				this.$prompt('<p style="color:red;">请注意确认后</p><p style="color:red;">1. 所有下级代理会以此差价重置商品佣金</p><p style="color:red;">2. 新上架的商品也会以此差价设置佣金</p><p style="color:red;">3. 由于更改代理和商品数据过多，请耐心等待</p>', '差价佣金', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '修改差价佣金',
					dangerouslyUseHTMLString: true
				}).then(({
					value
				}) => {
					if (value < 0) {
						this.$message({
							type: 'info',
							message: '输入金额错误'
						});
					} else {
						value = Number(value).toFixed(2)
						fee_diff(this.fee0).then(res => {
							this.$message({
								type: 'success',
								message: '修改的佣金: ' + value
							});
						})
						this.fee_diff = value
						this.fee0.fee_diff = value
					}


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			getList(page) {
				this.params.page = page ? page : this.params.page;
				this.emptytxt = '加载中...';
				this.loading = true;
				agent_aglist(this.params).then(res => {
					this.list = res.data.list
					this.total = res.data.total
					this.fee_diff = res.data.fee_diff
					this.aid = res.data.id
					this.loading = false
					if (this.list.length == 0) {
						this.emptytxt = '暂无数据'
					}
				})
			},
			handleSearch() {
				this.getList(1)
			},
			handleCurrentChange(val) {
				this.params.page = val
				this.getList()
			},
			add() {
				this.sub = {
					id: 0,
					username: '',
					password: '',
					name: '',
					mobile: '',
					fee: '',
				}
				this.addshow = true
			},
			edit(row) {
				this.sub = {
					id: row.agid,
					username: row.agent.username,
					password: '',
					name: row.agent.name,
					mobile: row.agent.mobile,
					fee: '',
				}
				this.addshow = true
			},
			subForm() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {

						if (this.sub.id == 0) {
							if (this.sub.fee < 0) {
								return this.$notify({
									title: '错误提示',
									message: '佣金不能小于0',
									type: 'error',
									duration: 1000,
								})
							}
							agent_agadd(this.sub).then(res => {
								this.$notify({
									title: '温馨提示',
									message: res.msg,
									type: 'success',
									duration: 1000,
								})
								this.addshow = false
								this.getList()
							})
						} else {
							agent_agedit(this.sub).then(res => {
								this.$notify({
									title: '温馨提示',
									message: res.msg,
									type: 'success',
									duration: 1000,
								})
								this.addshow = false
								this.getList()
							})
						}
					} else {
						return false
					}
				})
			},
			reset(row) {
				this.$prompt('设置差价值，自带重置该分销商所有商品佣金', '差价重置佣金', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[0-9]*$/,
					inputErrorMessage: '金额不正确'
				}).then(({
					value
				}) => {
					if (value == null || value < 0) {
						return this.$notify({
							title: '错误提示',
							message: '金额不能小于0',
							type: 'error',
							duration: 1000,
						})
					}
					agent_resetDiffFee({
						id: row.agid,
						fee: value
					}).then(res => {
						this.$notify({
							title: '温馨提示',
							message: res.msg,
							type: 'success',
							duration: 1000,
						})
					})
				});
			},
			xia(row) {
				this.xialist(row.agid)
				this.xiashow = true
			},
			xialist(id) {
				this.emptytxtxj = '加载中...';
				this.loadingxj = true;
				agent_xiaList({
					id: id
				}).then(res => {
					this.listxj = res.data.list
					this.loadingxj = false
					if (this.listxj.length == 0) {
						this.emptytxtxj = '暂无数据'
					}
				})
			},

			resetone(row) {
				this.gsub.id = row.id
				this.gsub.fee = row.fee
				this.gsub.status = row.status + ''
				this.gsshow = true
				this.gsub.agent_id = row.agent_id
			},
			subGs() {
				if (this.gsub.fee == null || this.gsub.fee < 0) {
					return this.$notify({
						title: '错误提示',
						message: '金额不能小于0',
						type: 'error',
						duration: 1000,
					})
				}
				agent_xiaEdit(this.gsub).then(res => {
					this.$notify({
						title: '温馨提示',
						message: res.msg,
						type: 'success',
						duration: 1000,
					})
					this.xialist(this.gsub.agent_id)
					this.gsshow = false
				})
			},
			//代理话费
			hua(row) {
				this.hualist(row.agid)
				this.huashow = true
			},
			hualist(id) {
				this.emptytxthua = '加载中...';
				this.loadinghua = true;
				charge_xiaList({
					id: id
				}).then(res => {
					this.listhua = res.data.list
					this.loadinghua = false
					if (this.listhua.length == 0) {
						this.emptytxthua = '暂无数据'
					}
				})
			},
			resetcharge(row) {
				this.$prompt('修改话费佣金', '重置佣金', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^[0-9]*$/,
					inputErrorMessage: '金额不正确'
				}).then(({
					value
				}) => {
					if (value == null || value < 0) {
						return this.$notify({
							title: '错误提示',
							message: '金额不能小于0',
							type: 'error',
							duration: 1000,
						})
					}
					charge_xiaEdit({
						id: row.id,
						fee: value,
						status: 1
					}).then(res => {

						this.hualist(row.agent_id)

						this.$notify({
							title: '温馨提示',
							message: res.msg,
							type: 'success',
							duration: 1000,
						})

					})
				});
			}



		},
	}
</script>

<style>

</style>